<template>
    <MyHome></MyHome>

    <el-table :data="channel.channelList" style="width: 100%">
    <el-table-column prop="seatID" label="座位ID" width="180" />
    <el-table-column prop="starting" label="起点站" width="180" />
    <el-table-column prop="terminal" label="终点站" />
    <el-table-column prop="departure" label="发车时间" />
    <el-table-column prop="arrival" label="到达时间" />
    <el-table-column prop="seatType" label="座位类型" />
    <el-table-column prop="price" label="票价" />
    <!-- <el-table-column prop="sold" label="是否售完" /> -->

    <!-- 按钮 -->
    <el-table-column label="操作">
      <template #default="scope">
        <el-button type="primary" @click="handleEdit(scope.$index, scope.row)">
          订票
        </el-button>
      </template>
    </el-table-column>

  </el-table>
        <!-- 分页查询
        <el-pagination
    :page-size="20"
    :pager-count="11"
    layout="prev, pager, next"
    :total="channel.pagination"
  /> -->

    <!-- 订票的弹出框详细 -->
  <el-dialog v-model="centerDialogVisible" title="请选择您的购票的类型:" width="550" center>
    <div class="wz1">车次:{{ channel.trainNumber }}</div>
    <div class="wz1">起始站:{{channel.starting}}</div>
    <div class="wz1">终点站:{{ channel.terminal}}</div>
    <div class="wz1">发车时间:{{channel.departure }}</div>
    <div class="wz1">到达时间:{{ channel.arrival}}</div>
    <div class="wz1">座位类型:{{ channel.seatType }}</div>
    <!-- 一等座信息 -->
   <div class="wz2" style="color: cadetblue;">
    <span class="wz3">一等座价格:{{channel.price1}}元</span>
    <span class="wz3">一等座剩余票数:{{channel.grade1}}票</span>
  </div> 
    <!-- 二等座信息 -->
  <div class="wz2" style="color: darkgreen;">
    <span class="wz3">二等座价格:{{channel.price}}元</span>
    <span class="wz3">二等座剩余票数:{{channel.grade2}}票</span>
  </div>
  <!-- 无座信息 -->
  <div class="wz2" style="color: gray;">
    <span class="wz3">无座票价格:{{channel.price}}元</span>
    <span class="wz3">无座票剩余票数:{{ channel.seatno }}票</span>
  </div>

  <div class="messagebigbox">
    <div>购票者姓名：{{ channel.loginList[channel.logininfoid-1].name }}</div>
    <div>购票者账户：{{ channel.loginList[channel.logininfoid-1].account }}</div>
    <div>购票者权限：{{ channel.loginList[channel.logininfoid-1].userRole }}</div>
  </div>  
    <template #footer>
      <div class="dialog-footer">
        <el-button type="primary" @click="ydz">购买一等座</el-button>
        <el-button type="primary" @click="edz" >
          购买二等座
        </el-button>
        <el-button type="primary" @click="sdz">
          购买无座票
        </el-button>
      </div>
    </template>
  </el-dialog>


</template>

<script setup>
import MyHome from './top/MyHome.vue';
import { ref } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import { useCounterStore } from '../stores/counter'
const channel = useCounterStore()
//把pinia中的数据放到tableData中
// const tableData = ref([]);
// tableData.value = channel.channelList

//一等座按钮
const ydz = () => {
  //提示是否购买
  ElMessageBox.confirm(
    '您确定要购买一等座吗?',
    '请选择要执行的购票操作',
    {
      confirmButtonText: '确定购票',
      cancelButtonText: '取消购票',
      type: 'warning',
    }
  )
    .then(() => {
      ElMessage({
        type: 'success',
        message: '一等座购买成功!',
      })
      //一等座价格
      channel.priceall = channel.price1;
      //关闭窗口
      centerDialogVisible.value = false;
      //购买的座位号识别
      channel.grade = "一等座";
      //调用订票接口
      channel.orderList()
}).catch(() => {
      ElMessage({
        type: 'info',
        message: '订单取消了购买',
      })
})
}

//二等座按钮
const edz = () => {
    //提示是否购买
    ElMessageBox.confirm(
    '您确定要购买二等座吗?',
    '请选择要执行的购票操作',
    {
      confirmButtonText: '确定购票',
      cancelButtonText: '取消购票',
      type: 'warning',
    }
  )
    .then(() => {
      ElMessage({
        type: 'success',
        message: '二等座购买成功!',
      })
      //二等座价格：
      channel.priceall = channel.price;
      //关闭窗口
      centerDialogVisible.value = false;
      //存入二等座，给后端插入数据用的
      channel.grade = "二等座";
      //调用订票接口
      channel.orderList()
}).catch(() => {
      ElMessage({
        type: 'info',
        message: '订单取消购买',
      })
})
}

//三等座按钮
const sdz = () => {
    //提示是否购买
    ElMessageBox.confirm(
    '您确定要购买无座吗?无座可以选择无人座位坐下暂时休息',
    '请选择要执行的购票操作',
    {
      confirmButtonText: '确定购票',
      cancelButtonText: '取消购票',
      type: 'warning',
    }
  )
    .then(() => {
      ElMessage({
        type: 'success',
        message: '无座票购买成功!',
      })
      // //无座票价格：
      channel.priceall = channel.price;
      //关闭窗口
      centerDialogVisible.value = false;
      //存入无座票
      channel.grade = "无座票";
      //调用订票接口
      channel.orderList()
}).catch(() => {
      ElMessage({
        type: 'info',
        message: '订单取消购买',
      })
})
}

//handleEdit
const handleEdit = (index, row) => {

  if(channel.value1 === false){
    ElMessage({
      type: 'warning',
      message: '管理已经禁止购票操作！',
    })
    return;
  }



  if(channel.isLogin === false){
    ElMessage({
      message: '请先登录',
      type: 'warning',
    })
    return
  }
  centerDialogVisible.value = true
  channel.trainNumber = row.seatID
  channel.starting = row.starting
  channel.terminal = row.terminal
  channel.departure = row.departure
  channel.arrival = row.arrival
  channel.seatType = row.seatType
  channel.price = row.price
  channel.price1 = row.price1
  channel.grade1 = row.grade1
  channel.grade2 = row.grade2
  channel.seatno = row.seatno
}

//控制订票的弹出框的显示
const centerDialogVisible = ref(false)


</script>


<style lang="css" scoped>
.messagebigbox{
  width: 80%;
  height: 100px;
  background-color: rgba(255, 255, 255, 0.7);
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
  border-radius: 10px;
  margin: auto;
  display: flex;
  justify-content: space-around;
  align-items: center;
  flex-direction: column;
  font-size: 20px;
  font-weight: 700;
  color: rgb(0, 0, 0);
  margin-top: 20px;
  margin-bottom: 20px;
}
.wz3{
  margin: 20px;
  font-size: 20px;
}
.wz2{
  margin: 10px;
  font-size: 20px;
}
.wz1{
  margin: 10px;
  font-size: 20px;
  font-weight: 700;
}
input{
  margin: 10px;
  width: 100px;
  height: 30px;
  border-radius: 10px;
}
</style>
